<template>
      <van-popup
        v-model="showPopup"
        round
        closeable
        close-icon="close"
        :close-on-click-overlay="false"
        position="bottom"
        class="balance-pay-popup-wrap"
        :style="{height: showKeyboard ? '450px' : '250px'}"
    >
        <div class="title" >确认支付</div>
        <!-- 交易密码 -->
        <div class="row border-none" >
            <span class="desc" >请输入支付密码:</span>
        </div>
        <div class="row border-none" >
            <van-password-input
            :value="tradePassword"
            :focused="showKeyboard"
            @focus="handleShowKeyboard"
            ></van-password-input>
            <van-number-keyboard
            v-model="tradePassword"
            :show="showKeyboard"
            :maxlength="maxlength"
            :hide-on-click-outside="false"
            @input="onPasswordInput"
            @delete="onPasswordDelete"
            @blur="showKeyboard = false"
            ></van-number-keyboard>
        </div>
    </van-popup>
</template>

<script>
import { BANLANCE_PAY } from '@/api/mine';
export default {
    data() {
        return {
            showPopup: false,
            maxlength: 6,
            showKeyboard: false,
            tradePassword: "",
            completePassword: false,
            orderId: '',
            loading: false,
            patInfo:{},
            type:''
        }
    },
    methods: {
        initData(patInfo,type) {
            console.log(patInfo);
            console.log(type);
            
            this.patInfo=patInfo
            this.type=type
            // this.orderId = id;
            this.tradePassword = "";
            this.completePassword = false;
            this.showPopup = true;
        },
        handleShowKeyboard() {
          this.tradePassword = "";
          this.completePassword = false;
          this.showKeyboard = true;
        },
        onPasswordInput(t) {
          this.tradePassword = (this.tradePassword + t).slice(0, this.maxlength),
          this.tradePassword.length !== this.maxlength || this.completePassword || (this.completePassword = !0,
          this.onSubmit())
        },
        onPasswordDelete() {
          this.tradePassword && (this.tradePassword = this.tradePassword.slice(0, this.tradePassword.length - 1),
          this.completePassword = this.tradePassword.length === this.maxlength)
        },
        onSubmit() {
            if(this.loading) {
                return
            }
            this.loading = true;

            let params = {};
                params['business_type'] = this.patInfo.business_type;
                params['business_id'] = this.patInfo.business_id;
                params['pay_password'] = this.tradePassword;
                params['type'] = this.type;
            this.$http.post(BANLANCE_PAY, params)
            .then(() => {
                this.loading = false;
                this.showPopup = false;
                this.$toast.success('支付成功');
                this.$emit('refreshData');
            })
            .catch(() => {
                this.loading = false;
            })

        }
    }

}

</script>
<style lang="scss" >
.balance-pay-popup-wrap{
    display: flex;
    -webkit-box-orient: vertical;
    flex-direction: column;
    text-align: center;
    padding: 0.32rem;
    box-sizing: border-box;
    .title{
          color: #1b1b1b;
          font-size: 0.36rem;
          font-weight: 700;
          margin-bottom: .3rem;
    }
    .row{
          display: flex;
          -webkit-box-pack: justify;
          -ms-flex-pack: justify;
          justify-content: space-between;
          align-items: center;
          padding-top: .2rem;
          padding-bottom: .2rem;
          border-bottom: 1px solid #ebedf0;
          &.border-none{
            border: none;
          }
    }
    .van-password-input{
        width: 100%;
        margin: 0;
    }
}
</style>